<!--
 * @Description: 商品导入弹窗
 * @Author: Li Yujie
 * @Date: 2020/12/24
 * @Last Modified by: Li Yujie
 * @Last Modified time: 2020/12/24
-->
<template>
    <section class="wrapper">
        <el-dialog
            title="导入商品"
            :visible.sync="dialogVisible"
            width="640px"
            :close-on-click-modal="false"
            @close="handleClose"
        >
            <el-input
                v-model="goods_nos"
                type="textarea"
                :autosize="{ minRows: 6, maxRows: 10}"
                placeholder="请输入导入商品的商品编号，使用逗号隔开"
            />
            <span
                slot="footer"
                class="dialog-footer"
            >
                <el-button
                    type="primary"
                    size="medium"
                    :style="{width: '120px'}"
                    :disabled="!goods_nos"
                    :loading="loading"
                    @click="handleConfirm"
                >
                    确认导入
                </el-button>
            </span>
        </el-dialog>
    </section>
</template>

<script>
/**
 * 商品批量导入
 * @param visible - 弹窗显示状态
 * @param type - 优惠券编辑页面标识 true可用商品 false不可用商品
 * @param requestUrl - 导入商品请求接口 默认优惠券商品选择
 */
export default {
    name: 'GoodsImport',
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        type: {
            type: Boolean,
            default: true
        },
        requestUrl: {
            type: String,
            default: '/student/shop_goods%5Cget_list_for_select'
        },
        pageSize: {
            type: Number,
            default: 0
        },
        // 额外请求参数
        params: {
            type: Object,
            default: () => {
                return {};
            }
        }
    },
    computed: {
        dialogVisible: {
            get() {
                return this.visible;
            },
            set(val) {
                this.$emit('update:visible', val);
            }
        }
    },
    data() {
        return {
            goods_nos: '',
            loading: false
        };
    },
    mounted() {},
    methods: {
        /**
         * 确认导入
         */
        handleConfirm() {
            this.loading = true;
            // 中文，转英文,
            let params = {
                goods_nos: this.goods_nos.replace(/，/ig,','),
                page_size: this.pageSize,
                ...this.params
            };

            this.$post(this.requestUrl, params, resp => {
                if (resp.code === 1) {
                    let result = {
                        list: resp.data.list,
                        type: this.type
                    };

                    this.$emit('change', result);
                    this.$emit('update:visible', false);
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
                this.loading = false;
            });
        },

        /**
         * 弹窗关闭
         */
        handleClose() {
            this.goods_nos = '';
            this.loading = false;
        }
    }
};
</script>

<style scoped lang="less">
.wrapper {
    /deep/ .el-dialog {
        margin-top: 15vh!important;
        .el-dialog__header {
            padding-top: 10px;
            box-shadow: 0 1px 0 0 rgba(233, 233, 233, 1);
            display: flex;
            align-items: center;
            background: #FAFAFA;
            border-radius: 4px 4px 0 0;

            .el-dialog__title {
                font-weight: 500;
                color: #333;
                font-size: 14px;
            }

            .el-icon-close:before {
                color: rgb(194, 194, 194);
                font-size: 17px;
                font-weight: bold;
            }

            .el-dialog__headerbtn {
                top: 14px;
            }
        }

        .el-dialog__body {
            padding: 24px 24px 0;
        }

        .el-textarea__inner {
            resize: none;
        }

        .el-dialog__footer {
            text-align: center;
            padding-bottom: 30px;
            margin-top: 6px;
        }
    }
}
</style>
